<template>
    <div>
        <div class="item-box">当选项为
            <el-select class="select-input" v-model="itemValueId" clearable @change="changeShowControl">
                <el-option
                    v-for="(it, index) in checkOptions"
                    :value="it.tempId || it.id"
                    :label="it.name"
                    :key="index">
                </el-option>
            </el-select>
            时，
            <el-select class="singe-line-select" v-model="chooseIdList" multiple @change="changeShowControl">
                <el-option
                    v-for="(it, index) in itemList"
                    :value="it.tempId || it.id"
                    :label="it.name"
                    :key="index">
                </el-option>
            </el-select>
            显示
            <slot></slot>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Prop, PropSync, Vue, Watch } from "vue-property-decorator";

@Component({
    name: "DisplayConditionItem"
})
export default class DisplayConditionItem extends Vue {
    // 当前表单项
    @PropSync("itemControl", { type: Object, default: {} }) readonly item: any;
    @PropSync(
        'list',
        {
            type: Array,
            default: () => {
                return [];
            }
        })
    readonly currentList!: any[];

    // 所有表单项
    @Prop({ default: () => [] }) private itemList!: any[]
    // 当前选中项
    @Prop({ default: "" }) private value!: any
    // 已经控制的表单项
    @Prop({ default: () => [] }) private controlId!: any[]
    // 已经使用了的选项id
    @Prop({ default: () => [] }) private hasOptions!: any[]

    @Watch("value", { deep: true })
    changeValue() {
        this.itemValueId = this.value;
        this.chooseIdList = this.controlId;
    }

    get _item() {
        return JSON.parse(JSON.stringify(this.item));
    }

    get _itemList() {
        return JSON.parse(JSON.stringify(this.itemList));
    }

    @Watch("_item", { deep: true })
    changItem(newValue: any, oldValue: any) {
        if (newValue.tempId === oldValue.tempId) {
            if (newValue.options.length === oldValue.options.length) {
                const newIdList = newValue.options.map((item: any) => item.tempId || item.id);
                const oldIdList = oldValue.options.map((item: any) => item.tempId || item.id);
                if (newIdList.join() === oldIdList.join()) {
                    return;
                }
            }
            this.itemValueId = "";
            this.chooseIdList = [];
        } else {
            this.itemValueId = this.value;
            this.chooseIdList = this.controlId;
        }
    }

    @Watch("_itemList", { deep: true })
    changeItemList(newValue: any, oldValue: any) {
        if (this.oldItemId === this.item.tempId) {
            const newIdList = newValue.map((item: any) => item.tempId || item.id);
            const oldIdList = oldValue.map((item: any) => item.tempId || item.id);
            const noList = oldIdList.filter((item: any) => !newIdList.includes(item));
            if (noList.length) {
                for (let i = 0; i < this.chooseIdList.length; i++) {
                    if (!noList.includes(this.chooseIdList[i])) {
                        this.chooseIdList.splice(i, 1);
                        i--;
                    }
                }
            }
        } else {
            this.oldItemId = this.item.tempId;
        }
    }

    get checkOptions() {
        return this.item.options.filter((item: any) => !this.hasOptions.includes(item.tempId || item.id));
    }

    oldItemId = ""
    // 选项id
    itemValueId = ""
    // 选中显示的表单项
    chooseIdList: string[] = []

    created() {
        this.oldItemId = this.item.tempId;
        this.itemValueId = this.value;
        this.chooseIdList = this.controlId;
    }

    changeShowControl() {
        if (this.itemValueId) {
            this.$emit("addOptionId", this.itemValueId);
            this.$emit("changeItemCascader", {
                itemValueId: this.itemValueId,
                chooseIdList: this.chooseIdList
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.item-box {
    line-height: 3.2;
}
.select-input {
    width: 160px;
}
.singe-line-select {
    width: 160px;
}
</style>
